<template>
	<view class="item" @click="gotoPer()">
		<view class="user">
			<view class="left">
				<image :src="imgUrl + '/image/per1.png'"></image>
				<view class="left-right">
					<view class="name-wrapper">
						<text class="name">张潇潇</text>
						<text class="gender-age">女 · 34岁</text>
					</view>
					<view class="user-cont">
						<text>10年以上经验</text>
						<text>本科</text>
					</view>
				</view>
			</view>
			<text class="yzb yzb-next icon-next" v-if="rightArrow"></text>
		</view>
		<view v-if="fromType=='1'">
			<view class="skill">
				<image :src="imgUrl + '/image/gangwei4.png'" style="width: 30rpx;height: 30rpx;margin-right: 20rpx;">
				</image>
				<view class="">操作工<text style="margin: 0 10rpx;">·</text>普工 <text class="salary">面议</text>
				</view>
			</view>
			<view class="advantage-box">
				<view class="advantage-content">
					<view class="advantage-label">优势：</view>
					<view class="advantage-text">工作内容是: 劳动者从事劳动的工种、岗位劳动者从事劳动的工种、岗位曾就职于瞪羚企业:参与新经生活板块业务卧</view>
				</view>
			</view>
		</view>
		<!-- 应聘管理 -->
		<view v-if="fromType=='2'">
			<view class="title space-between">
				<view class="left" style="flex:1">
					<view class="title-name">
						太原市公司招聘一线普工（无需 经验)
					</view>
				</view>
				<text class="right" style="width: 170rpx">300/天 </text>
			</view>
			<view class="desc">
				<text class="blue">企业认证</text>
				<text>经验不限</text>
				<text class="blue">月结工资</text>
				<text class="blue">五险一金</text>
			</view>
			<view class="descr">招聘单位：山西博才人力资源管理有限公司</view>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:''
			};
		},
		props: {
			rightArrow: {
				type: Boolean,
				default: false
			},
			fromType: {
				type: String,
				default: '1' //1首页列表
			}
		},
		created() {
			if (this.$mConfig) {
				this.imgUrl = this.$mConfig.imageUrl || '';
			}
		},
		methods: {
			gotoPer() {
				console.log('组件内 gotoPer 被调用');
				this.$emit('gotoPer');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.ellipsis-oneline {
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
	}

	.item {
		background-color: $bgcolor_white;
		padding: 24rpx;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
	}

	.space-between {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
	}

	.title {
		padding: 44rpx 0 26rpx;
		font-weight: 600;

		.title-name {
			font-size: $uni-font-size-lg !important;
			color: #111;
		}

		.right {
			color: #348FFF;
			font-size: $uni-font-size-lg !important;
		}
	}

	.descr {
		color: #222;
		font-size: 28rpx;
		margin-top: 26rpx;
	}

	.user {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		image {
			width: 90upx;
			height: 90upx;
			border-radius: 10upx;
		}

		.left {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 26rpx;
			color: #333;

			.name-wrapper {
				display: flex;
				align-items: center;
			}

			.name {
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
				margin-right: 20rpx;
			}
			
			.gender-age {
				color: #999;
				font-size: 28rpx;
			}

			.left-right {
				padding-left: 24rpx;

				.user-cont {
					margin-top: 10rpx;
					color: #666;

					text {
						margin-right: 26rpx;
					}
				}
			}
		}

		.yzb-next {
			color: #333;
			font-weight: 600;
			font-size: 40rpx;
		}
	}

	.desc {
		margin-top: 5upx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		align-content: flex-start;
		flex-direction: row;
		justify-content: flex-start;

		text {
			font-size: 24rpx;
			padding: 10rpx 14rpx;
			margin-right: 15upx;
			margin-bottom: 8upx;
			background-color: #F3F5FA;
			color: $font-color-666;
			border-radius: 10rpx;
		}

		.blue {
			color: #4B9BFF;
		}

		.blue1 {
			background: #24C9FF;
		}
	}

	.skill {
		margin-top: 24rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		
		.salary {
			margin-left: 30rpx;
		}
	}
	
	.advantage-box {
		background: #F5F9FF;
		border-radius: 10rpx;
		margin-top: 24rpx;
		
		.advantage-content {
			display: flex;
			padding: 20rpx;
			
			.advantage-label {
				width: 90rpx;
				color: #3A92FF;
				font-size: 28rpx;
			}
			
			.advantage-text {
				flex: 1;
				color: #666;
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}
</style>